<template>
	<xn-form-container title="添加比例设定" width="35%" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-row>
			<a-col style="width: 70%">
				<a-form-item label="金额范围">
				</a-form-item>
			</a-col>

			<a-col style="width: 20%" >
				<a-form-item label="阶梯定价:">
				</a-form-item>
			</a-col>
		</a-row>
		<a-form
			ref="formRef"
			name="dynamic_form_nest_item"
			:model="dynamicValidateForm"
			@finish="onFinish"
		>
			<a-space
				v-for="(user, index) in dynamicValidateForm"
				:key="user.id"
				style="display: flex; margin-bottom: 8px"
				align="baseline"
			>
				<a-form-item
					:name="[index, 'first']"
					:rules="{
          required: true,
          message: '缺少开始区间',
        }"
				>
					<a-input v-model:value="user.first" placeholder="开始范围"/>
				</a-form-item>
				<a-form-item style="width: 75px">
					元 < 金额 <
				</a-form-item>
				<a-form-item
					:name="[index, 'last']"
					:rules="{
          required: true,
          message: '缺少结束区间',
        }"
				>
					<a-input v-model:value="user.last" placeholder="结束范围"/>
				</a-form-item>
				<a-form-item style="width: 20px">
					元
				</a-form-item>
				<a-form-item
					:name="[index, 'ratio']"
					:rules="{
        required: true,
        message: '缺少比例',
      }"

				>
					<a-input v-model:value="user.ratio" placeholder="佣金比例" />
				</a-form-item>
				<span>%</span>
				<MinusCircleOutlined @click="removeUser(user)"/>
			</a-space>
			<a-form-item>
				<a-button type="dashed" block @click="addUser">
					<PlusOutlined/>
					添加比例设定
				</a-button>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button class="xn-mr8" @click="handleSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>
<script setup>
import {reactive, ref} from 'vue'
import {MinusCircleOutlined} from '@ant-design/icons-vue'
import monthlyApi from '@/api/bi/goals/monthly/monthlyApi'

const formRef = ref();
const dynamicValidateForm = reactive([]);
const removeUser = (item) => {
	const index = dynamicValidateForm.indexOf(item);
	if (index !== -1) {
		dynamicValidateForm.splice(index, 1);
	}
};
const addUser = () => {
	dynamicValidateForm.push({
		first: '',
		last: '',
		ratio: ''
	});
};
const onFinish = (values) => {
	console.log('Received values of form:', values);
	console.log('dynamicValidateForm:', dynamicValidateForm);
};


const visible = ref(false)
const parentId = ref(null)

const showDrawer = (id) => {
	parentId.value = id
	let idPara = {
		id: id
	}
	visible.value = true
	monthlyApi.pageListRatio(idPara).then(res => {
		// 清空原数组
		dynamicValidateForm.splice(0, dynamicValidateForm.length);
		// 假设 res 是一个数组，将 res 中的元素添加到 dynamicValidateForm 中
		res.forEach(item => {
			dynamicValidateForm.push(item);
		});
		console.log('===+1');
		console.log(dynamicValidateForm);
	})

}
const onClose = () => {
	dynamicValidateForm.value = []
	visible.value = false
}
const handleSubmit = () => {
	console.log('---------')
	console.log(dynamicValidateForm)
	console.log(parentId.value)
	console.log('====')
	monthlyApi.addRetaio(dynamicValidateForm, parentId.value)
}

defineExpose({showDrawer})
</script>
